09. Discussion about Constraint Layout
Before starting on the next video, we want to bring to your attention a new feature in new Android Studio - Constraint Layout - that may require you to make some code modifications to the steps you see in the following videos.
Keeping up with the changes
Google is constantly improving the Android platform and adding new features. This is great for you as a developer, but it makes learning harder sometimes. Recently Google released ConstraintLayout
; a tool that makes it super fast to create responsive UIs with many different types of components. ConstraintLayout
is a great tool to have on the sleeve, but for this class, we will use RelativeLayout
, LinearLayout
simpler.
All of this matters to you because the new project templates in Android Studio now use ConstraintLayout
as default, which makes the code you see on your computer a bit different from what is on the screen.
Current Layout File
In the new versions of Android Studio, after choosing the Empty Activity
template, the layout file app/src/main/res/layout/activity_main.xml
will look like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.udacity.myapplication.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintLeft_toLeftOf="@+id/activity_main"
app:layout_constraintTop_toTopOf="@+id/activity_main"
app:layout_constraintRight_toRightOf="@+id/activity_main"
app:layout_constraintBottom_toBottomOf="@+id/activity_main" />
</android.support.constraint.ConstraintLayout>
Note the use of ConstraintLayout
, and that TextView
has a list of limiters that position it within ConstraintLayout
.
Modify the Layout File
Unlike the above code, our videos and start code assume that the template looks more like the following, using as the root of the view a RelativeLayout
:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.udacity.myapplication.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
When you create your new project, go to app/src/main/res/layout/activity_main.xml
and copy and paste the above code. Then you're ready to go!
Learn More About Constraint Layout
If you want to understand more about the great features that ConstraintLayout
provides, check out the documentation at: https://developer.android.com/studio/write/layout-editor.html
Additionally, for those wanting a hands-on demo using Android Studio Layout Editor with ConstraintLayout, here's a Code Lab. Note that this is important information, but is beyond the current scope of this course.